import {ContentView, ContentViewNoFooter} from '@/components/main/contentView'
import {ViewLeftNotFooter} from '@/components/main/viewLeft'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {
  DeviceListTable,
  TypeMainViewNav,
  TypeModel,
  getTableDatas,
  device_list_state,
  ViewLeftFilter,
} from './components'

export default defineComponent({
  name: 'device-list',
  setup() {
    let {route} = useGlobalAPI()
    let {search} = toRefs(device_list_state)

    const init = async () => {
      if (route.path === '/device/list') {
        search.value.userPhone = route.params.userPhone as string | ''
        search.value.userCompany = route.params.userCompany as string | ''
        getTableDatas()
      }
    }
    onMounted(async () => {
      init()
    })
    watch(route, n => {
      init()
    })
    return () => {
      if (route.path === '/device/list') {
        return (
          <div class="h-full flex">
            <ViewLeftNotFooter>
              {{
                content: () => <ViewLeftFilter></ViewLeftFilter>,
              }}
            </ViewLeftNotFooter>
            <ContentViewNoFooter>
              {{
                nav: () => <TypeMainViewNav></TypeMainViewNav>,
                content: () => <DeviceListTable></DeviceListTable>,
              }}
            </ContentViewNoFooter>
            <TypeModel></TypeModel>
          </div>
        )
      } else {
        return <router-view></router-view>
      }
    }
  },
})
